<template>
    <div>
        <div v-if="isShowAllTab">
            <CommonSwitch :showCenter="true" centerText="1" rightText="Hz" @clickLeft="switchWifiMode(wifiModeDict.WIFI24)" @clickCenter="switchWifiMode(wifiModeDict.WIFI5)" @clickRight="switchWifiMode(wifiModeDict.WIFI6)" :labelBoolean="labelSelect" />
        </div>

        <div v-if="isShowTwoTab">
            <CommonSwitch @clickLeft="switchWifiMode(wifiModeDict.WIFI24)" @clickRight="switchWifiMode(wifiModeDict.WIFI5)" :labelBoolean="labelBoolean" />
        </div>
    </div>
</template>

<script>
import { wifiModeDict } from '@/constant/dict';
import CommonSwitch from '@/components/common/CommonSwitch.vue';
export default {
    name: 'WifiCommonTab',
    components: { CommonSwitch },
    props: {
        isShowAllTab: {
            type: Boolean,
            default: false
        },
        isShowTwoTab: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            wifiModeDict: wifiModeDict,
            labelSelect: 'left',
            labelBoolean: true
        };
    },
    created() {
        const wifiModeType = this.$route.query.wifiModeType;
        if (wifiModeType === wifiModeDict.WIFI6) {
            this.switchWifiMode(wifiModeType);
        } else if (wifiModeType === wifiModeDict.WIFI5) {
            this.switchWifiMode(wifiModeType);
        } else {
            this.switchWifiMode(wifiModeDict.WIFI24);
        }
    },
    methods: {
        switchWifiMode(_mode) {
            if (_mode == wifiModeDict.WIFI5) {
                this.labelBoolean = false;
                this.labelSelect = 'center';
            } else if (_mode == wifiModeDict.WIFI6) {
                this.labelBoolean = false;
                this.labelSelect = 'right';
            } else {
                this.labelBoolean = true;
                this.labelSelect = 'left';
            }
            this.$router.push({ query: { wifiModeType: _mode } });
            this.$emit('switMode', _mode);
        }
    }
};
</script>
<style scoped lang="less"></style>
